<template>
	<view class="special">
		<!--专区入口-->
		<view class="special-list">
			<template v-for="item in permInfo.special">
				<view
					class="special-item"
					:key="item.name"
					@tap="toPath(item)"
					v-if="item.status === 1"
				>
					<image
						class="image"
						v-if="item.path === 'jd'"
						src="@/static/images/index/icon-jd.png"
					/>
					<image
						class="image"
						v-if="item.path === 'taobao'"
						src="@/static/images/index/icon-tb.png"
					/>
					<image
						class="image"
						v-if="item.path === 'share'"
						src="@/static/images/index/icon-share.png"
					/>
					<image
						class="image"
						v-if="item.path === 'sign'"
						src="@/static/images/index/icon-sign.png"
					/>
					<image
						class="image"
						v-if="item.path === 'pinduoduo'"
						src="@/static/images/index/icon-pdd.png"
					/>
					<!-- <text class="text" v-if="item.path === 'share' && userInfo.channel === 'drsj1'">商家专属</text> -->
					<text class="text">{{ item.name }}</text>
				</view>
			</template>
		</view>

		<!--活动专区入口 -->
		<template v-for="item in permInfo.common">
			<view
				class="special-new"
				@click="toNew()"
				v-if="
					item.name === 'isNew' &&
						item.status === 1 && newPerson && isFirstOrder
				"
			>
				<image class="image" model="widthFix" src="@/static/images/index/new-banner.png" />
				<image class="go-image" src="@/static/images/index/new-go.png" />
			</view>
			<view
				class="special-zero"
				@click="toNew()"
				v-if="item.name === 'isZero' && item.status === 1"
			>
				<image class="image" model="widthFix" src="@/static/images/index/zero-banner.png" />
				<image class="go-image" src="@/static/images/index/go.png" />
			</view>
		</template>
		
		<!--授权弹窗-->
		<authorize ref="authorize"></authorize>
	</view>
</template>

<script>
const Alibcsdk = uni.requireNativePlugin('UZK-Alibcsdk');
const JDopen = uni.requireNativePlugin('UZK-JDopen');
import Authorize from '@/components/Authorize';
import { mapGetters } from 'vuex';
export default {
	name: 'Special',
	components: {
		Authorize
	},
	props: {
		permInfo: {
			type: Object,
			default: () => {
				return {};
			}
		},
		newPerson: {
			type: Boolean,
			default: () => {
				return true;
			}
		},
		isFirstOrder: {
			type: Boolean,
			default: () => {
				return true;
			}
		}
	},
	data() {
		return {
			
		};
	},
	computed: {
		...mapGetters(['userInfo'])
	},
	methods: {
		toPath(item) {
			switch (item.path) {
				case 'taobao':
					if (!uni.getStorageSync('token')) {
						uni.navigateTo({
							url: '/pages/common/login',
							animationType: 'slide-in-bottom',
							animationDuration: 300
						});
						return false;
					}
					let urlArr = item.icon.split(',');
					if (this.userInfo.tbStatus === 1) {
						this.$service.common.userHf.getRelationId().then(res => {
							Alibcsdk.init(initResult => {
								if (initResult.status) {
									console.log(urlArr[0] + res + urlArr[1]);
									Alibcsdk.openurl(
										{
											url: urlArr[0] + res + urlArr[1]
										},
										result => {}
									);
								} else {
									uni.showToast({
										title: '初始化失败'
									});
								}
							});
						});
					} else {
						if (this.userInfo.tbStatus === 2) {
							uni.showToast({
								title: '亲亲，您的淘宝账号需补充支付宝实名认证信息，请先去认证哦！',
								icon: 'none'
							});
						}
						if (this.userInfo.tbStatus === 3) {
							uni.showToast({
								title: '授权过期，请重新授权',
								icon: 'none'
							});
						}
						// 开启授权弹窗
						this.$refs.authorize.open();
					}

					break;
				case 'jd':
				if (!uni.getStorageSync('token')) {
					uni.navigateTo({
						url: '/pages/common/login',
						animationType: 'slide-in-bottom',
						animationDuration: 300
					});
					return false;
				}
				this.$service.jingdong.goods.cpslink().then(res => {
					JDopen.init(result => {
						if (result.status) {
							JDopen.openurl(
								{
									url: res.url
								},
								result => {
									if (!result.status) {
										return this.$Router.push({
											path: '/pages/special/jingdong',
											query: {
												url: res.url
											}
										});
									}
								}
							);
						}
					});
				})
				return;
					break;
				case 'share':
					if (!uni.getStorageSync('token')) {
						uni.navigateTo({
							url: '/pages/common/login',
							animationType: 'slide-in-bottom',
							animationDuration: 300
						});
						return false;
					}
					return this.$Router.push('/pages/common/share');
				case 'sign':
					return this.$Router.pushTab('/pages/integral/index');
				case 'pinduoduo':
					if (!uni.getStorageSync('token')) {
						uni.navigateTo({
							url: '/pages/common/login',
							animationType: 'slide-in-bottom',
							animationDuration: 300
						});
						return false;
					}
					// 生成拼多多推广链接
					this.$service.common.userHf.generateUrl().then(res => {
						this.$Router.push({
							path: '/pages/special/pinduoduo',
							query: {
								url: res
							}
						});
					});
					break;
			}
		},
		// 去新人专享
		toNew() {
			if (!uni.getStorageSync('token')) {
				uni.navigateTo({
					url: '/pages/common/login',
					animationType: 'slide-in-bottom',
					animationDuration: 300
				});
				return false;
			}
			this.$Router.push('/pages/special/new');
		},
		// 去百亿补贴
		toZero() {
			if (!uni.getStorageSync('token')) {
				uni.navigateTo({
					url: '/pages/common/login',
					animationType: 'slide-in-bottom',
					animationDuration: 300
				});
				return false;
			}
			let token = uni.getStorageSync('token');
			this.$Router.push({
				path: '/pages/special/zeroWeb',
				query: {
					url: 'https://zfx.xmonecode.com/million/?app=hf&sdkType=hf&token=' + token + '#/'
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.special {
	margin-top: 10rpx;
	transition: 0.5s;

	.special-list {
		margin-bottom: 24rpx;
		@include flexBox(space-around, flex-start);

		.special-item {
			text-align: center;
			@include flexBox(center, center, column);

			.image {
				width: 104rpx;
				height: 104rpx;
			}

			.text {
				color: $text-black;
				font-size: 28rpx;
				margin-top: 20rpx;
			}
		}
	}

	.special-new {
		width: 750rpx;
		height: 150rpx;
		margin: 24rpx auto 24rpx;
		position: relative;

		.image {
			width: 100%;
			height: 100%;
		}

		.go-image {
			width: 58rpx;
			height: 36rpx;
			position: absolute;
			right: 68rpx;
			top: 60rpx;
			animation: animation_scal 2s infinite;
		}
	}

	.special-zero {
		width: 710rpx;
		height: 126rpx;
		margin: 24rpx auto 24rpx;
		position: relative;

		.image {
			width: 100%;
			height: 100%;
		}

		.go-image {
			width: 96rpx;
			height: 96rpx;
			position: absolute;
			right: 20rpx;
			top: 18rpx;
			animation: animation_scal 2s infinite;
		}
	}

	.flash-sale {
		width: 710rpx;
		height: 374rpx;
		background: #fff;
		border-radius: 16rpx;
		margin: 0 auto 20rpx;
		padding: 16rpx;

		.top {
			@include flexBox(space-between);

			.image {
				width: 180rpx;
				height: 35rpx;
			}

			.time {
				@include flexBox(center, center);
				margin-top: 8rpx;

				.time-span {
					width: 25rpx;
					height: 26rpx;
					line-height: 26rpx;
					color: #221d2c;
					background: #ffffff;
					border-radius: 4rpx;
					font-size: 20rpx;
					margin: 0 2rpx;
					padding: 0;
				}

				.time-bg {
					color: #ffffff;
					background: rgba(34, 29, 44, 1);
					text-align: center;
				}

				.division {
					width: 10rpx;
					height: 24rpx;
					line-height: 24rpx;
					display: inline-block;
					font-size: 28rpx;
				}
			}
		}
	}

	.brand-goods {
		width: 710rpx;
		height: 394rpx;
		border-radius: 16rpx;
		background: #fff;
		margin: 0 auto 20rpx;
		position: relative;

		.background {
			width: 100%;
			height: 220rpx;
			position: absolute;
		}

		.front {
			position: relative;
			padding: 20rpx 28rpx;

			.top {
				@include flexBox(null, center);

				.crown {
					width: 41rpx;
					height: 34rpx;
					margin-right: 6rpx;
				}

				.text {
					font-size: 32rpx;
					color: #fff;
				}
			}
		}
	}

	.goods-list {
		width: 100%;
		margin-top: 20rpx;
		@include flexBox(space-between);

		.goods-item {
			width: 200rpx;

			.img-box {
				width: 200rpx;
				height: 200rpx;

				.image {
					width: 100%;
					height: 100%;
					border-radius: 16rpx;
				}
			}

			.goods-title {
				font-size: 24rpx;
				color: #171717;
				margin: 10rpx 0;
				@include ellipsis(1);
			}

			.price {
				.price-tips {
					width: 66rpx;
					height: 22rpx;
					line-height: 22rpx;
					background: linear-gradient(
						85deg,
						rgba(247, 1, 20, 1) 0%,
						rgba(255, 126, 126, 1) 100%
					);
					border-radius: 14rpx 2rpx 14rpx 14rpx;
					color: #ffffff;
					font-weight: 500;
					font-size: 16rpx;
					padding: 0 10rpx;
				}

				.end-price {
					font-size: 28rpx;
					font-weight: 500;
					line-height: 40rpx;
					color: rgba(247, 1, 20, 1);
					margin-left: 8rpx;
				}
			}
		}
	}

	.is-shelf {
		background: #fff;

		.shelf-item {
			@include flexBox(space-around);

			.image {
				width: 120rpx;
				height: 120rpx;
				margin: 10rpx 0;
			}
		}

		.banner {
			width: 750rpx;
			padding: 20rpx;
		}
	}
}

@keyframes animation_scal {
	0% {
		opacity: 0;
		transform: scale(0);
	}

	40% {
		opacity: 1;
		transform: scale(1);
	}

	100% {
		opacity: 1;
		transform: scale(1);
	}
}
</style>
